[data-pnotify].custom-elem,
[data-pnotify].custom-elem.pnotify-mode-light {
  --notice-background-color: theme("colors.yellow.500");
  --notice-border-color: theme("colors.yellow.300");
  --notice-text-color: theme("colors.yellow.100");
  --notice-icon-filter: brightness(0) saturate(100%);
  --info-background-color: theme("colors.blue.500");
  --info-border-color: theme("colors.blue.300");
  --info-text-color: theme("colors.blue.100");
  --info-icon-filter: invert(31%) sepia(94%) saturate(1957%) hue-rotate(213deg)
    brightness(90%) contrast(106%);
  --success-background-color: theme("colors.green.500");
  --success-border-color: theme("colors.green.300");
  --success-text-color: theme("colors.green.100");
  --success-icon-filter: brightness(0) saturate(100%);
  --error-background-color: theme("colors.red.500");
  --error-border-color: theme("colors.red.300");
  --error-text-color: theme("colors.red.100");
  --error-icon-filter: brightness(0) saturate(100%);
}

[data-pnotify] .custom-notice {
  --custom-background-color: var(--notice-background-color);
  --custom-border-color: var(--notice-border-color);
  --custom-text-color: var(--notice-text-color);
  --custom-icon-filter: var(--notice-icon-filter);
  --custom-primary-button-background-color: var(--notice-border-color);
  --custom-primary-button-text-color: var(--notice-text-color);
}
[data-pnotify] .custom-info {
  --custom-background-color: var(--info-background-color);
  --custom-border-color: var(--info-border-color);
  --custom-text-color: var(--info-text-color);
  --custom-icon-filter: var(--info-icon-filter);
  --custom-primary-button-background-color: var(--info-border-color);
  --custom-primary-button-text-color: var(--info-text-color);
}
[data-pnotify] .custom-success {
  --custom-background-color: var(--success-background-color);
  --custom-border-color: var(--success-border-color);
  --custom-text-color: var(--success-text-color);
  --custom-icon-filter: var(--success-icon-filter);
  --custom-primary-button-background-color: var(--success-border-color);
  --custom-primary-button-text-color: var(--success-text-color);
}
[data-pnotify] .custom-error {
  --custom-background-color: var(--error-background-color);
  --custom-border-color: var(--error-border-color);
  --custom-text-color: var(--error-text-color);
  --custom-icon-filter: var(--error-icon-filter);
  --custom-primary-button-background-color: var(--error-border-color);
  --custom-primary-button-text-color: var(--error-text-color);
}

[data-pnotify] .custom-container {
  padding: 1.3rem;
  background-color: var(--custom-background-color);
  border: 1px solid var(--custom-border-color);
  color: var(--custom-text-color);
  border-radius: 0.5rem;
}

[data-pnotify].pnotify-with-icon .custom-content {
  margin-left: calc(1.3rem + 16px);
}
[dir="rtl"] [data-pnotify].pnotify-with-icon .custom-content {
  margin-right: calc(1.3rem + 16px);
  margin-left: 0;
}
[data-pnotify] .custom-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0;
}
[data-pnotify] .custom-text {
  font-size: 0.9rem;
  margin-top: 0;
  color: var(--custom-text-color);
}
[data-pnotify] .custom-title + .custom-text,
[data-pnotify] .custom-confirm {
  margin-top: 0.2rem;
}
[data-pnotify] .custom-icon,
[data-pnotify] .custom-closer,
[data-pnotify] .custom-sticker {
  display: flex;
  justify-content: center;
  align-items: center;
}
[data-pnotify] .custom-icon,
[data-pnotify] .custom-icon > span,
[data-pnotify] .custom-icon > span:after {
  width: 1.2rem;
  height: 1.2rem;
  line-height: 1.2rem;
}
[data-pnotify] .custom-icon-closer,
[data-pnotify] .custom-icon-sticker,
[data-pnotify] .custom-icon-closer:after,
[data-pnotify] .custom-icon-sticker:after {
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
}

[data-pnotify] .custom-icon-notice:after {
  filter: var(--custom-icon-filter);
  content: url();
}
[data-pnotify] .custom-icon-info:after {
  filter: var(--custom-icon-filter);
  content: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTMsOUgxMVY3SDEzTTEzLDE3SDExVjExSDEzTTEyLDJBMTAsMTAgMCAwLDAgMiwxMkExMCwxMCAwIDAsMCAxMiwyMkExMCwxMCAwIDAsMCAyMiwxMkExMCwxMCAwIDAsMCAxMiwyWiIvPjwvc3ZnPg==);
}
[data-pnotify] .custom-icon-success:after {
  filter: var(--custom-icon-filter);
  content: url();
}
[data-pnotify] .custom-icon-error:after {
  filter: var(--custom-icon-filter);
  content: url();
}
[data-pnotify] .custom-icon-closer:after {
  filter: brightness(0) saturate(100%);
  content: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTksNi40MUwxNy41OSw1TDEyLDEwLjU5TDYuNDEsNUw1LDYuNDFMMTAuNTksMTJMNSwxNy41OUw2LjQxLDE5TDEyLDEzLjQxTDE3LjU5LDE5TDE5LDE3LjU5TDEzLjQxLDEyTDE5LDYuNDFaIi8+PC9zdmc+);
}
[data-pnotify] .custom-icon-sticker:after {
  filter: invert(67%) sepia(0%) saturate(1467%) hue-rotate(231deg)
    brightness(80%) contrast(94%);
  content: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTYsMTJWNEgxN1YySDdWNEg4VjEyTDYsMTRWMTZIMTEuMlYyMkgxMi44VjE2SDE4VjE0TDE2LDEyWiIvPjwvc3ZnPg==);
}
[data-pnotify] .custom-icon-sticker.custom-icon-stuck:after {
  filter: var(--custom-icon-filter);
  content: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMiw1LjI3TDMuMjgsNEwyMCwyMC43MkwxOC43MywyMkwxMi44LDE2LjA3VjIySDExLjJWMTZINlYxNEw4LDEyVjExLjI3TDIsNS4yN00xNiwxMkwxOCwxNFYxNkgxNy44Mkw4LDYuMThWNEg3VjJIMTdWNEgxNlYxMloiLz48L3N2Zz4=);
}

[data-pnotify] .custom-prompt-bar {
  margin-bottom: 1rem;
}
[data-pnotify] .custom-prompt-bar,
[data-pnotify] .custom-action-bar {
  width: 100%;
  box-sizing: border-box;
}
[data-pnotify] .custom-btn {
  text-transform: uppercase;
  font-weight: bold;
  padding: 0.4rem 1rem;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--custom-text-color);
}
[data-pnotify] .custom-btn-primary {
  background-color: var(--custom-primary-button-background-color);
  color: var(--custom-primary-button-text-color);
}

[data-pnotify] .custom-countdown {
  background-color: var(--custom-background-color);
}
[data-pnotify] .custom-countdown-bar {
  background-color: var(--custom-border-color);
}

[data-pnotify] .custom-paginate {
  display: inline-flex;
  flex-direction: column;
}
[data-pnotify] .custom-paginate-btn {
  width: 1em;
  height: 1em;
  line-height: 0.5em;
  border: 0;
  padding: 0;
  background: transparent;
}
[data-pnotify] .custom-paginate-previous {
  margin-right: 0;
}
[data-pnotify] .custom-paginate-next {
  margin-left: 0;
}
[data-pnotify] .custom-paginate-btn:disabled:after,
[data-pnotify] .custom-paginate-btn[aria-disabled="true"]:after {
  opacity: 0.5;
}
[data-pnotify] .custom-paginate-previous:after {
  filter: var(--custom-icon-filter);
  content: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0xMS42NyAzLjg3TDkuOSAyLjEgMCAxMmw5LjkgOS45IDEuNzctMS43N0wzLjU0IDEyeiIvPjwvc3ZnPg==);
}
[data-pnotify] .custom-paginate-next:after {
  filter: var(--custom-icon-filter);
  content: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik01Ljg4IDQuMTJMMTMuNzYgMTJsLTcuODggNy44OEw4IDIybDEwLTEwTDggMnoiLz48L3N2Zz4=);
}
[data-pnotify] .custom-paginate-count-of {
  opacity: 0.8;
}
